<template>
<div class="tabsviews" style="
    height: 60px;">
 
   <i  style="left: 0px;" v-show="tabIndex>0" class="el-icon-arrow-left"
   @click="arrowClick('pre')"
   ></i> 
 <div class="scroll-row " style=" float: left;"  ref="scrollOuter">
     <div  class="scroll-body "  ref="scrollBody"> 
     <!-- mx-1 -->
            <el-tag
            v-for="(tag,index) in tabsList"
            :key="tag.label" 
            :class=" (tag.name === nativeTab ? 'tab-native' : '') "
            :closable="tag.name !== 'welcome'"
            disable-transitions="true"
            :type="warning"
            @close="handleClose(tag.name,index)"
           
            @click="changeTabs(tag)" 
            >
                {{tag.title}}
            </el-tag>
            
     </div>
 </div> 
   <i  style="right:  0px; " class="el-icon-arrow-right"
   v-show="tabIndex<maxtabIndex"     @click="arrowClick('next')"
   ></i> 
 </div> 
 
</template>

<script>

import storage from '../utils/storage'
import utils from '../utils/utils'
export default { 
 
  data() {
    return {

      tabsList:{},
      tabIndex:0,
      maxtabIndex:0,
      nativeTab:1
    };
  },
  mounted() {
    this.getTabsList();
    
  },
  	watch:{
			//监视路由,一开始就监视,获取routeName,来判断是否激活
            $route:{
                immediate:true,
                handler(val){
                    // this.routeName=val.name
                    console.log( val);
                    this.nativeTab=val.name;
                    this.tabsList=utils.getStorage("tagsview")
                }
            }
      },
	methods:{
            //点击把菜单的名字传出去
            getTabsList(){
				//  this.$store.commit("pushtags")
               this.tabsList=utils.getStorage("tagsview")
                if(typeof(this.tabsList)=="undefined"||this.tabsList==""||this.tabsList==null){
                    this.tabsList =[
                            {
                            "apipath": "dashboard/index",
                            "childlist": [],
                            "component": 0,
                            "createtime": 1491635035,
                            "icon": "user-filled",
                            "id": 1,
                            "ismenu": 1,
                            "menuCode": 0,
                            "name": "welcome",
                            "pid": 0,
                            "remark": "",
                            "spacer": "",
                            "status": "normal",
                            "title": "控制台",
                            "updatetime": 1652348263,
                            "weigh": 9999
                            }
                            
                                                
                            ];
                }
                 let outerWidth = this.$refs.scrollOuter.offsetWidth;
                let innerWidth = this.$refs.scrollBody.offsetWidth;
this.maxtabIndex=(Math.ceil(innerWidth/outerWidth)-1);
              
            },
            	//删除
     	handleClose(name,i) {
 
                //找到对应的tab,删除
                this.tabsList.forEach((item,index) => {
                    if(item.name==name){
                        this.tabsList.splice(index,1)
                    }
                });
                 i=i-1;
 				//判断当前页面是不是被删除的tag相对应
                
                 let delname=this.$route.name;
                
    //  this.tabsList=
                utils.setStorage("tagsview",  this.tabsList);
                console.log(this.tabsList);
              
                if(delname!=name){
                    
                    return 
                }else{
                    
                   let z="";  
                    
                    
                	//相对应再判断是不是最后一个tag
                    if(i==this.tabsList.length-1){
                     
                         //如果是最后一个,往前一个跳
                      
                      z= this.tabsList[i].name; 
                        this.$router.push(z)
                    }else{
                        
                        console.log(this.tabsList,this.tabsList[i],i,"删除2"); 
                      z= this.tabsList[i].name;
                        this.$router.push(z)
                        // this.$router.push(this.tabsList[i].name)
                    }
                }
                
            },
			arrowClick(type) {
               
                // 不需要滑动
                // if (this.tabsList.length <= 5) return;
                let outerWidth = this.$refs.scrollOuter.offsetWidth;
                let innerWidth = this.$refs.scrollBody.offsetWidth;
                console.log(outerWidth,innerWidth,type);
                
                //  
                if (type === "pre"&&this.tabIndex>0) {
                    this.tabIndex=this.tabIndex-1;
                    this.$refs.scrollBody.style.marginLeft = ( this.tabIndex* outerWidth)+"px"
                }
                if (type === "next"&&this.tabIndex<=Math.ceil(innerWidth/outerWidth)){
                    // 往后滑，滑动距离>内部scroll宽度-外部scroll宽度，说明到最右
                     this.tabIndex=this.tabIndex+1;
                 
                    this.$refs.scrollBody.style.marginLeft= -( this.tabIndex* outerWidth)+"px"
                }
                // this.getSysInfo();
                }, 
			//点击tag,切换路由
            changeTabs(tag){
            	//如果当前路由与tag是对应的,不需要跳了
                console.log(tag)
                
                if(this.$route.path==tag.name){
                    return
                }else{
                    this.$router.push(tag.name)
                }
            },
        
           
        }

}
  
</script>
<style >
  .tabsviews{
            width: 100%;
            overflow-x: scroll;
            overflow: hidden; 
        }
      .tabsviews i  {
            position: absolute;z-index:10000; line-height: 60px; height: 60px;
        }
          .tabsviews .el-tag{
              margin-top: 18px;
            font-style: normal;
            display: inline-block;
            margin-right: 5px;
            }
       

       .tabsviews    .scroll-row{
            position: absolute;
            left: 2%;
            right: 2%;
            top: 0;
            bottom: 0;
            overflow: hidden; 
            
        }
 
    .tabsviews  .scroll-body {
        height: 100%;
        position: absolute;
        overflow: visible;
        white-space: nowrap;
        -webkit-transition: left 0.3s ease;
        transition: left 0.3s ease;
        }
</style>